<template>
	<div class="dsfdsBody">
		<div class="page-content header-clear-medium">
			<div class="content mt-3">
				<div class="tabs tabs-box" id="tab_group">
					<div class="tab-controls rounded-s border-highlight">
						<a class="font-13  color-highlight" data-bs-target="#tab_Contract" href="#tab_Contract" @click="getSelType('0')" :class="{collapsed:isSelType==0}"
							data-bs-toggle="collapse">合约</a>
						<a class="font-13 color-highlight" data-bs-target="#tab_Activation" href="#tab_Activation" @click="getSelType('1')" :class="{collapsed:isSelType==1}"
							data-bs-toggle="collapse">激活</a>
						<a class="font-13 color-highlight" data-bs-target="#tab_History" href="#tab_History" @click="getSelType('2')" :class="{collapsed:isSelType==2}"
							data-bs-toggle="collapse">记录</a>
					</div>
					<div class="mt-3"></div>

					<div class="collapse" id="tab_Contract"
						data-bs-parent="#tab_group" v-if="isSelType==0">
						<div class="card card-style mlmr0">
							<div class="card-header">
								账户详情
							</div>
							<div class="card-body">
								<div class="Smain_borderBox  ">
									<div class="contract_profile ">
										<img src="../../assets/nav/package-02.png" width="45px">
										<div>
											<span>等级: <span class="badge bg-secondary">&nbsp;普通用户</span></span>
											<div>注册日期: 星期一 十一月 11日 2024</div>
										</div>
									</div>
									<div class="contract_username" style="display: none;">ceshi66</div>
								</div>
							</div>
						</div>

						<div class="card card-style mlmr0">
							<div class="card-header">
								合约详情
							</div>
							<div class="card-body">
								<div class="new_package_box">
									<div class="top_package">
										<div class="left_package d-flex align-items-center">
											<img src="../../assets/nav/package-02.png">
											<div class="inner_left text-left">
												<span></span>
												<div>RMB </div>
											</div>
										</div>
										<div class="right_package">
											<div class="inner_right_top">
												<span>您受MY保护</span>
												<img src="https://www.myyl996.com/static/index/asset/logo.png">
											</div>
											<div class="inner_right_bot package_status">
												<img src="../../assets/nav/cuohao.png" alt="">
												<span>未受保护</span>
											</div>
										</div>
									</div>
									<div class="bottom_profile_package  ">
										<div class="contract_details_dates">
											<div class="date_wrap">
												<div>激活日期</div>
												<span>1970-01-01 08:00:00</span>
											</div>
											<div class="date_wrap">
												<div>最后索赔日期</div>
												<span>----</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="card card-style mlmr0">
							<div class="card-header">
								索赔详情
							</div>
							<div class="card-body">
								<div class="total_claim">
									<div class="claim_amt">
										<span>索赔总额</span>
										<div>0</div>
									</div>
									<div class="lines"></div>
									<div class="display_flex">
										<div class="claim_dates">
											<span>0/2</span>
										</div>
										<div class="claim_count">
											<div class="display_space">
												<span>索赔保险</span>
												<div>0 次</div>
											</div>
											<div class="lines"></div>
											<div class="display_space">
												<span>批准的索赔</span>
												<div>0 次</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="collapse" id="tab_Activation"
						data-bs-parent="#tab_group" style="" v-if="isSelType==1">
						<div class="row">
							<div class="col-sm-1 col-md-2 col-lg-4">
								<div class="card card-style mlmr0">
									<div class="ap_con main_borderBox pb-2 ">
										<div class="package_top">
											<div class="right_package">
												<img src="../../assets/nav/package-02.png">
												<span class="ml-5 font-weight-bold">套餐一</span>
												<div class="font-weight-normal">RMB 2180.00</div>
											</div>
											<div class="right_packageTow">
												<img src="../../assets/nav/youjiantou.png" alt="">
											</div>
										</div>
										<div class="protect_fee">
											<span>套餐最高保费:&nbsp;<b>30.00</b></span>
										</div>

										<div class="list_row">
											<div class="head-1 col_1">下单数量</div>
											<div class="head-1 col_2">单</div>
											<div class="head-1 col_2">赢</div>
											<div class="head-1 col_3">保费</div>
										</div>
										<div class="list_row inner_ap_list">
											<div class="head-1 col_1">1</div>
											<div class="head-2 col_2">20</div>
											<div class="head-2 col_2">20</div>
											<div class="head-2 col_3">10</div>
										</div>
										<div class="list_row inner_ap_list">
											<div class="head-1 col_1">2</div>
											<div class="head-2 col_2">60</div>
											<div class="head-2 col_2">40</div>
											<div class="head-2 col_3">20</div>
										</div>
										<div class="list_row inner_ap_list">
											<div class="head-1 col_1">3</div>
											<div class="head-2 col_2">140</div>
											<div class="head-2 col_2">60</div>
											<div class="head-2 col_3">30</div>
										</div>
										<div class="list_row inner_ap_list">
											<div class="head-1 col_1">4</div>
											<div class="head-2 col_2">280</div>
											<div class="head-2 col_2">60</div>
											<div class="head-2 col_3">30</div>
										</div>
										<div class="list_row inner_ap_list">
											<div class="head-1 col_1">5</div>
											<div class="head-2 col_2">560</div>
											<div class="head-2 col_2">60</div>
											<div class="head-2 col_3">30</div>
										</div>
										<div class="list_row inner_ap_list">
											<div class="head-1 col_1">6</div>
											<div class="head-2 col_2">1120</div>
											<div class="head-2 col_2">60</div>
											<div class="head-2 col_3">30</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="collapse" id="tab_History"
						data-bs-parent="#tab_group" style="" v-if="isSelType==3">
						<div class="row">
							<div class="table-responsive">

							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- - yield app-content -->
		</div>
	</div>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				isSelType: 0
			};

		},
		created() {},
		mounted() {

		},
		methods: {
			getSelType(num) {
				this.isSelType = num;
			},
		},
	};
</script>



<style scoped>
	* {
		box-sizing: border-box;
	}

	.dsfdsBody {
		width: 100%;
		min-height: 100vh;
		background-color: #f1f1f7;
		font-size: 14px;
		font-family: "Nunito", sans-serif !important;
		line-height: 24px !important;
		color: #747474 !important;
	}

	.header-clear-medium {
		padding-top: calc(calc(55px + 30px) +(env(safe-area-inset-top))* 0.8) !important;
	}

	.page-content {
		position: relative;
		overflow-x: hidden;
		transition: all 250ms ease;
		z-index: 2;
		padding-bottom: calc(60px +(env(safe-area-inset-bottom))* 1.1);
	}

	.content {
		position: relative;
		margin: 20px 20px 20px 20px;
	}

	.mt-3 {
		margin-top: 1rem !important;
	}

	.tabs-box .tab-controls {
		overflow: hidden;
		display: flex;
		border: solid 1px rgba(0, 0, 0, 0.07);
	}

	.tabs .tab-controls {
		font-weight: 600;
		font-family: "Nunito", sans-serif;
	}

	.rounded-s {
		border-radius: 15px !important;
	}

	.border-highlight {
		border-color: #4A89DC !important;
	}



	.tabs-box .tab-controls a {
		transition: all 200ms ease;
		overflow: hidden;
		text-align: center;
		border-right: solid 1px rgba(0, 0, 0, 0.07);
		width: 100%;
		margin: auto;
		color: #000;
		line-height: 38px;
	}

	.font-13 {
		font-size: 13px !important;
	}

	a {
		text-decoration: none !important;
	}

	.tabs-box .tab-controls a:last-child {
		border-right: none !important;
	}

	.color-highlight {
		color: #4A89DC !important;
	}

	.collapse {
		min-height: 100vh;
	}

	.collapsed {
		background-color: #4A89DC;
		border-color: #4A89DC;
		color: #FFF !important;
		pointer-events: none;
	}

	.collapsimg {
		height: 0;
		overflow: hidden;
		transform: height 0.35s ease;
	}

	.mt-3 {
		margin-top: 1rem !important;
	}

	.mlmr0 {
		margin-left: 0;
		margin-right: 0;
	}

	.card-style {
		margin: 0px 0px 15px 0px;
		border-radius: 10px;
		box-shadow: rgb(0 0 0 / 30%) 0px 30px 60px -30px, rgb(10 37 64 / 35%) 0px -2px 6px 0px inset;
	}

	.card-style {
		overflow: hidden;
		border: none;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
	}

	.card {
		position: relative;
		display: flex;
		flex-direction: column;
		min-width: 0;
		word-wrap: break-word;
		background-color: #fff;
		background-clip: border-box;
	}

	.card-header:first-child {
		border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
	}

	.card-header {
		padding: 0.5rem 1rem;
		margin-bottom: 0;
		background-color: rgba(0, 0, 0, 0.03);
		border-bottom: 1px solid rgba(0, 0, 0, 0.125);
	}

	.card-body,
	.card-top,
	.card-center,
	.card-bottom {
		z-index: 3;
	}

	.card-body {
		flex: 1 1 auto;
		padding: 1rem 1rem;
	}

	.contract_profile {
		display: flex;
		align-items: center;
	}

	.contract_profile img {
		width: 45px;
		/* height: 45px; */
		object-fit: cover;
		object-position: center;
		margin-right: 16px;
	}

	.contract_profile div {
		font-size: 11px;
		font-weight: normal;
		color: #797979;
	}

	.badge {
		display: inline-block;
		padding: 0.35em 0.65em;
		font-size: 0.75em;
		font-weight: 700;
		line-height: 1;
		color: #fff;
		text-align: center;
		white-space: nowrap;
		vertical-align: baseline;
		border-radius: 0.25rem;
	}

	.bg-secondary {
		background-color: rgba(108, 117, 125, 1) !important;
	}

	.contract_username {
		font-size: 15px;
		font-weight: bold;
		color: #2a2a2a;
		padding-top: 12px;
	}

	.new_package_box .top_package {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.top_package .left_package {
		width: auto;
	}

	.align-items-center {
		align-items: center !important;
	}

	.d-flex {
		display: flex !important;
	}

	.top_package .left_package img {
		width: 60px;
		margin: 0 10px 0 0;
	}

	.left_package .inner_left div {
		font-size: 16px;
		color: #2a2a2a;
	}

	.top_package .right_package {
		width: 45%;
		text-align: right;
	}

	.right_package .inner_right_top {
		display: flex;
		align-items: center;
		padding-bottom: 16px;
		justify-content: flex-end;
	}

	.right_package .inner_right_top span {
		font-size: 10px;
		line-height: 1.2;
		padding-right: 6px;
		padding-left: 10px;
	}

	.right_package .inner_right_top img {
		width: auto;
		max-width: 100px;
	}

	img,
	svg {
		vertical-align: middle;
	}

	.package_status img {
		width: 12px;
		height: 12px;
		margin-right: 2px;
	}

	.package_status span {
		font-size: 12px;
		color: #f00;
		font-weight: normal;
	}

	.bottom_profile_package {
		text-align: left;
	}

	.contract_details_dates {
		font-size: 12px;
		font-weight: normal;
		color: #797979;
		/* line-height: 1.75; */
		padding-top: 18px;
	}

	.date_wrap {
		display: flex;
		align-items: center;
		padding-bottom: 3px;
	}

	.main_borderBox {
		padding: 15px 16px;
	}

	.date_wrap div {
		width: 110px;
	}

	.contract_details_dates span {
		font-size: 12px;
		font-weight: normal;
		color: #2a2a2a;
	}

	.claim_amt span {
		font-size: 12px;
		font-weight: normal;
		color: #797979;
	}

	.claim_amt div {
		font-size: 14px;
		font-weight: normal;
		color: #2a2a2a;
		padding: 3px 0 0px;
	}

	.total_claim .lines {
		height: 1px;
		margin: 14px 0px 0px;
		border-bottom: solid 1px #ebebeb;
	}

	.display_flex {
		display: flex;
		align-items: stretch;
	}

	.claim_dates {
		width: 30%;
		border-right: solid 1px #ebebeb;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26px;
		font-weight: bold;
		color: #c09129;
	}

	.claim_count {
		width: 70%;
	}

	.display_space {
		display: flex;
		align-items: center;
		padding: 10px 16px;
		justify-content: space-between;
	}

	.claim_count .lines {
		height: 1px;
		margin: 0;
		background: #ebebeb;
	}

	.row {
		display: flex;
		flex-wrap: wrap;
		margin-top: calc(-1* 0);
		margin-right: calc(-.5* 1.5rem);
		margin-left: calc(-.5* 1.5rem);
	}

	.row>* {
		flex-shrink: 0;
		width: 100%;
		max-width: 100%;
		padding-right: calc(1.5rem* .5);
		padding-left: calc(1.5rem* .5);
		margin-top: 0;
	}

	.mlmr0 {
		margin-left: 0;
		margin-right: 0;
	}

	.package_top {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.package_top .right_package {
		display: flex;
		color: #c5993a;
		font-size: 16px;
		padding-right: 10px;
		align-items: center;
	}

	.package_top .right_package span {
		font-size: 14px;
		font-weight: bold;
		padding-right: 6px;
	}

	.package_top img {
		width: 50px;
		height: 50px;
	}

	.package_top .right_packageTow img {
		width: 12px;
		height: 12px;
	}

	.package_top .right_package img {
		width: 50px;
		height: 50px;
	}

	.ap_con .protect_fee {
		margin: 11px -16px 20px;
		padding: 11px 16px 12px;
		border-bottom: solid 1px #ebebeb;
		border-top: solid 1px #ebebeb;
		display: flex;
		align-items: center;
		font-size: 13px;
		font-weight: normal;
		color: #2a2a2a;
	}

	.list_row {
		display: flex;
		align-items: center;
		margin-bottom: 5px;
	}

	.list_row .col_1,
	.list_row .col_2,
	.list_row .col_3 {
		font-size: 11px;
		font-weight: normal;
		text-align: center;
		color: #a5a5a5;
	}

	.list_row .col_1 {
		width: 45%;
		text-align: left !important;
	}

	.list_row .col_2 {
		width: 15%;
	}

	.list_row .col_3 {
		width: 25%;
	}

	.head-1 {
		font-weight: bolder !important;
		color: #000 !important;
	}

	.list_row.inner_ap_list {
		padding-top: 10px;
		border-top: solid 1px #ebebeb;
		margin-bottom: 10px;
	}
</style>